<template>
	<view class="page">
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in collectList" :key="key"
				@click="navToCategoryPage(value.valueId)"
			>
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image v-if="showImg" :src="value.iconUrl"></image>
					</view>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{value.valueName}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{value.frontDesc?value.frontDesc:''}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isShowMore" >
			<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
		</view>
        <music-fab :hasCanPlay="hasCanPlay" 
        ></music-fab>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
    import commonOnLoad from '../../common/common_on_load.js';  
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			uniLoadMore
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin']),
            ...mapState(['hasCanPlay']),
			...mapState(['userInfo'])  
		},
		data() {
			return {
				status: 'more',
				showImg: false,
				collectList: [],
				contentText: {
					contentdown: "下拉显示更多",
					contentrefresh: "加载中",
					contentnomore: "没有更多"
				},
				offset:0,
				limit:8,
				isShowMore:false,
				isHasMore:true,
				isRunTabItemTap:true
			}
		},
		onTabItemTap(event){
			if(this.isRunTabItemTap){
				this.loadData();
			}else{
				this.isRunTabItemTap = true;
			}
		},
		onLoad(options) {
			this.isRunTabItemTap = false;
			let query = {
				routesConfig: this.$mRoutesConfig.collector,
				query:{}
			}
			uni.setStorage({
				key: 'beforeLoginUrlQuery',
				data: query,
			});
			
			commonOnLoad.commonOnLoad(this.$mRoutesConfig.collector,options,options.referenceId);//options.referenceId
			setTimeout(() => {
				this.showImg = true;
				// #ifdef H5  
				if (this.$wechat && this.$wechat.isWechat()) {  
					var url = this.$mConfig.baseUrl + "/api/shorturl/" + this.$mConfig.mpAppId + "/index";
					if(this.$store.getters.hasLogin){
						url = url + "?referenceId=" + this.$store.state.userInfo.id;
					}
					 this.$wechat.share({  
						  desc: this.$mConfig.descTxt,  
						  img: this.$mConfig.logoImgUrl,  
						  title:this.$mConfig.loginTitleTxt,  
					},url);  
				}  
				// #endif  
			}, 1000);
			this.loadData();
			// #ifdef MP
			if (!this.$store.getters.hasLogin ) {
				this.$store.commit("SET_IS_SILENT_LOGIN", true);
				this.silentLogin();
			}
			// #endif
		},
		onShareAppMessage() {
			let path = "/pages/index/index";
			if(this.$store.getters.hasLogin){
				path = path + "?referenceId=" + this.$store.state.userInfo.id;
			}
			return {
				title: this.$mConfig.descTxt,
				path: path,
				imageUrl:this.$mConfig.logoImgUrl
			}
		},
		onPullDownRefresh() {
		    this.loadData();
		},
		methods: {
				loadData(){
					this.offset = 0;
					this.collectList = [];
					this.isHasMore = true;
					this.getCollectCategoryList();
				},
				navToCategoryPage(id) {
					this.$mRouter.push({
						route: this.$mRoutesConfig.category,
						query: {
							id: id
						}
					})
				},
				async getCollectCategoryList() {
					var query = {
						offset:this.offset,
						limit:this.limit,
						type:1,
					};
					this.status = 'loading';
					this.isShowMore = true;
					
					let data = await this.$apis.getCollectCategoryList(query);
					console.log(JSON.stringify(data));
					this.offset = this.offset + this.limit;
					data.collectList.forEach(item => {
						this.collectList.push(item);
					});
					this.category = data.category;
					uni.stopPullDownRefresh();
					if(data.collectList.length == 0){
						this.status = 'noMore';
						this.isHasMore = false;
					}else{
						this.isShowMore = false;
						this.isHasMore = true;
					}
				},
		}
	}
</script>

<style lang="scss">
	.uni-media-list{
		.bg_img{
			height: 80upx;
			width: 80upx;
			padding-top:15upx;
			image {
				height: 80upx;
				width: 80upx;
			}
		}
	}
	.f-header{
		display:flex;
		align-items:center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
	}	
	.f-header image{
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.f-header .tit-box{
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.f-header .tit{
		font-size: $font-lg +2upx;
		color: #font-color-dark;
		line-height: 1.3;
	}
	.f-header .tit2{
		font-size: $font-sm;
		color: $font-color-light;
	}
	.f-header .icon-you{
		font-size: $font-lg +2upx;
		color: $font-color-light;
	}
	.uni-media-list-logo image{
		border-radius: 10%;
	}
</style>
